﻿<%@ Page Language="C#" MasterPageFile="~/master/ThreeColumnLayout.master" AutoEventWireup="true" CodeFile="productdetail.aspx.cs" Inherits="page_public_productdetail" Title="Untitled Page" %>
<%@ Register Src="~/control/VerticalMenu.ascx" TagPrefix="ucc" TagName="verticalMenu" %>
<%@ Register Src="~/control/VerticalAdvertise.ascx" TagPrefix="ucc" TagName="verticalAdvertise" %>
<%@ Register Assembly="App_Code" Namespace="Pheonix.Fashionzoomer.UI" TagPrefix="ucc" %>

<asp:Content ID="ContentLeft" ContentPlaceHolderID="LeftPlaceHolder" Runat="Server">
    <ucc:verticalMenu ID="leftMenu" runat="server" />
</asp:Content>
<asp:Content ID="ContentMiddle" ContentPlaceHolderID="MiddlePlaceHolder" Runat="Server">
    <table width="100%" align="center">
        <tr>
            <td align="left">
                <table cellpadding="0" cellspacing="0" width="510px">
                    <tr><td class="panTopLeft"></td><td class="pan panTopMiddle"></td><td class="panTopRight"></td></tr>
                    <tr>
                        <td class="pan panMidleLeft"></td>
                        <td class="pan panMiddleMiddle">
                            <table border="0" width="97%">
                                <tr>
                                    <td style="width:210px;" align="center" valign="top">
                                        <asp:Image runat="server" ID="bigView"  CssClass="productBigImage" 
                                            AlternateText="product big image" />
                                    </td>
                                    <td style="width:64px;" align="center" valign="top">
                                        <table border="0" width="100%">
                                            <tr>
                                                <td>
                                                    <asp:Image runat="server" ID="thumbView1" CssClass="productThumb"
                                                        AlternateText="product thumbnail image 1" onmouseover="changeBigView(this.src);" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <asp:Image runat="server" ID="thumbView2" CssClass="productThumb"
                                                        AlternateText="product thumbnail image 2" onmouseover="changeBigView(this.src);" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <asp:Image runat="server" ID="thumbView3" CssClass="productThumb"
                                                        AlternateText="product thumbnail image 3" onmouseover="changeBigView(this.src);" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <asp:Image runat="server" ID="thumbView4" CssClass="productThumb"
                                                        AlternateText="product thumbnail image 4" onmouseover="changeBigView(this.src);" />
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td valign="top" align="center">
                                        <table border="0" width="100%">
                                            <tr>
                                                <td align="left">
                                                    <asp:Label ID="productName" runat="server" SkinID="productTitle"></asp:Label>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="left">
                                                    <br />
                                                    <asp:HyperLink ID="brandName" runat="server" Font-Bold="true" ForeColor="#880000"></asp:HyperLink>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="left">
                                                    <br />
                                                    <asp:Label ID="price" runat="server" Font-Size="13px" Font-Bold="true" ></asp:Label>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="left">
                                                    <br />
                                                    <asp:Label ID="description" runat="server" ></asp:Label>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="left">
                                                    <br />
                                                    <span style="font-weight:bold;">Available in: </span>
                                                    <br />
                                                    <asp:Label ID="available" runat="server" ></asp:Label>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="right">
                                                    <table width="100%">
                                                        <tr>
                                                            <td align="left">
                                                                <asp:ImageButton ID="addToFavoriteButton" AlternateText="Add to favorite" runat="server"
                                                                    OnClientClick="return CheckLogin();" OnClick="AddToFavorite_Click" /> 
                                                            </td>
                                                            <td align="right">
                                                                <input type="image" id="fullSizeView" src="" alt="Full size view" 
                                                                    onclick="toggleMaxView();return false;" runat="server" />
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td colspan="2">
                                                                <ucc:ResponseMessage ID="uccResponseMessage" runat="server" ></ucc:ResponseMessage>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td class="pan panMiddleRight"></td></tr>
                    <tr><td class="panBottomLeft"></td><td class="pan panBottomMiddle"></td><td class="panBottomRight"></td></tr>
                </table>
            </td>
        </tr>
        <tr><td style="height:3px;"></td></tr>
        <tr>
            <td align="left" valign="middle">
                <div id="maxViewPanel" class="CollapsiblePanel" >
                    <div class="CollapsiblePanelTab"></div>
                    <div class="CollapsiblePanelContent">
                        <table cellpadding="0" cellspacing="0" width="510px">
                            <tr><td class="pan panTopLeft"></td><td class="pan panTopMiddle"></td><td class="pan panTopRight"></td></tr>
                            <tr>
                                <td class="pan panMidleLeft"></td>
                                <td class="pan panMiddleMiddle">
                                    <h5>Full Size View</h5>
                                    <table border="0" width="97%">
                                        <tr>
                                            <td align="center" valign="middle" style="width:80px;">
                                                <input id="maxViewPrev" type="image" src="../../image/back.gif" alt="previous" 
                                                    onclick="prevMaxView();return false;" runat="server" />
                                            </td>
                                            <td align="center" valign="middle">
                                                <asp:Image CssClass="maxView" ID="maxView" runat="server" AlternateText="max view" />
                                            </td>
                                            <td align="center" valign="middle" style="width:80px;">
                                                <input id="maxViewNext" type="image" src="../../image/forwd.gif" alt="forward" 
                                                    onclick="nextMaxView();return false;" runat="server" />
                                            </td>
                                        </tr>
                                        <td colspan="3" align="center">
                                            <h5>Viewing : <span id="maxImagePosition">1</span></h5>
                                        </td>
                                    </table>
                                </td>
                                <td class="pan panMiddleRight"></td></tr>
                            <tr><td class="pan panBottomLeft"></td><td class="pan panBottomMiddle"></td><td class="pan panBottomRight"></td></tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
        <tr><td style="height:3px;"></td></tr>
        <tr>
            <td align="left" valign="top">
                <asp:Panel ID="pnlRelatedProduct" runat="server">
                    <table cellpadding="0" cellspacing="0" width="510px">
                        <tr><td class="pan panTopLeft"></td><td class="pan panTopMiddle"></td><td class="pan panTopRight"></td></tr>
                        <tr>
                            <td class="pan panMidleLeft"></td>
                            <td class="pan panMiddleMiddle">
                                <table width="97%" border="0" cellspacing="2">
                                    <tr>
                                        <td colspan="4" align="left"><h5>Related Products</h5></td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <asp:HyperLink ID="relatedImageLink1" runat="server">
                                                <asp:Image ID="relatedImage1" CssClass="productRelatedImage" runat="server" 
                                                    AlternateText="releated productimage" />
                                            </asp:HyperLink>
                                        </td>
                                        <td align="center">
                                            <asp:HyperLink ID="relatedImageLink2" runat="server">
                                                <asp:Image ID="relatedImage2" CssClass="productRelatedImage" runat="server" 
                                                    AlternateText="releated productimage" />
                                            </asp:HyperLink>
                                        </td>
                                        <td align="center">
                                            <asp:HyperLink ID="relatedImageLink3" runat="server">
                                                <asp:Image ID="relatedImage3" CssClass="productRelatedImage" runat="server" 
                                                    AlternateText="releated productimage" />
                                            </asp:HyperLink>
                                        </td>
                                        <td align="center">
                                            <asp:HyperLink ID="relatedImageLink4" runat="server">
                                                <asp:Image ID="relatedImage4" CssClass="productRelatedImage" runat="server" 
                                                    AlternateText="releated productimage" />
                                            </asp:HyperLink>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <asp:HyperLink ID="relatedImageLink5" runat="server">
                                                <asp:Image ID="relatedImage5" CssClass="productRelatedImage" runat="server" 
                                                    AlternateText="releated productimage" />
                                            </asp:HyperLink>
                                        </td>
                                        <td align="center">
                                            <asp:HyperLink ID="relatedImageLink6" runat="server">
                                                <asp:Image ID="relatedImage6" CssClass="productRelatedImage" runat="server" 
                                                    AlternateText="releated productimage" />
                                            </asp:HyperLink>
                                        </td>
                                        <td align="center">
                                            <asp:HyperLink ID="relatedImageLink7" runat="server">
                                                <asp:Image ID="relatedImage7" CssClass="productRelatedImage" runat="server" 
                                                    AlternateText="releated productimage" />
                                            </asp:HyperLink>
                                        </td>
                                        <td align="center">
                                            <asp:HyperLink ID="relatedImageLink8" runat="server">
                                                <asp:Image ID="relatedImage8" CssClass="productRelatedImage" runat="server" 
                                                    AlternateText="releated productimage" />
                                            </asp:HyperLink>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td class="pan panMiddleRight"></td></tr>
                        <tr><td class="pan panBottomLeft"></td><td class="pan panBottomMiddle"></td><td class="pan panBottomRight"></td></tr>
                    </table>
                </asp:Panel>
            </td>
        </tr>
    </table>
    <script src="../../javascripts/SpryCollapsiblePanel.js" type="text/javascript"></script>
    <script language="JavaScript" type="text/javascript">
        var isOpen = false;
        var maxViewPosition = 0;
        var images = new Array();
        
        for(i=0;i<=3;i++)
            images[i] = new Image();
            
        images[0].src = "<%= maxViewImage1 %>";
        images[1].src = "<%= maxViewImage2 %>";
        images[2].src = "<%= maxViewImage3 %>";
        images[3].src = "<%= maxViewImage4 %>";
        
        function toggleMaxView()
        {
            if(isOpen)
            {
                CollapsiblePanel.close();
                isOpen = false;
            }
            else
            {
                CollapsiblePanel.open();
                isOpen = true;
            }
        }
        
        function prevMaxView()
        {
            maxViewPosition = (maxViewPosition -1 + 4)%4;
            document.getElementById("<%=maxView.ClientID%>").src = images[maxViewPosition].src;
            document.getElementById('maxImagePosition').innerHTML = (maxViewPosition+1).toString();
        }
        
        function nextMaxView()
        {
            maxViewPosition = (maxViewPosition +1 )%4;
            document.getElementById("<%=maxView.ClientID%>").src = images[maxViewPosition].src;
            document.getElementById('maxImagePosition').innerHTML = (maxViewPosition+1).toString();
        }
        
		var CollapsiblePanel = new Spry.Widget.CollapsiblePanel("maxViewPanel",{contentIsOpen:false, enableAnimation:true})
	
	    function changeBigView(thumbnailUrl)
	    {
	        if(thumbnailUrl.indexOf('NA')>0)
	            document.getElementById("<%=bigView.ClientID%>").src = thumbnailUrl.replace("thumbNA","bigImageNA");
	        else
	            document.getElementById("<%=bigView.ClientID%>").src = thumbnailUrl.replace("thumb","big");  
	    }
	    
	    function CheckLogin()
	    {
	        if('<%= Pheonix.CodeLibrary.Web.SessionManager.IsUserLoggedIn %>' == 'False')
	        {
	            alert("Please login first");
	            return false;
	        }
	        else
	            return true;
	    }
	</script>
</asp:Content>
<asp:Content ID="ContentRight" ContentPlaceHolderID="RightPlaceHolder" Runat="Server">
    <table border="0" width="100%" class="productDetailSidePanel">
        <tr>
            <td align="left">
                <span class="stateTextTitle">Rating: </span>
            </td>
            <td align="left">
                <asp:Label ID="rating" runat="server"></asp:Label>
            </td>
        </tr>
        <tr>
            <td align="left">
                <span class="stateTextTitle">Total Views:</span> 
            </td>
            <td align="left">
                <asp:Label ID="views" runat="server"></asp:Label>
            </td>
        </tr>
        <tr>
            <td align="left">
                <span class="stateTextTitle">Available since:</span> 
            </td>
            <td align="left">
                <asp:Label ID="availableFrom" runat="server"></asp:Label>
            </td>
        </tr>
    </table>
    <ucc:verticalAdvertise ID="rightAdvertise" runat="server" ContentType="HomePageVerticalAdvertisement" />
</asp:Content>

